<template>
    <div class="pass">
        <div class="form">
            <div>
                <input type="text" placeholder="手机号码" v-model="userPhone" @input="changeText">
            </div>
            <div class="vcodde">
                <input type="text" placeholder="验证码" v-model="userVcode" @input="changeBtn">
                <p class="send" ref="senText" @click="getVcodee">发送验证码<span v-show="isStart">({{times}})</span></p>
            </div>
            <div class="agree">
                <input type="checkbox" ref="agree">
                <p>已阅读并同意 <span>服务条款</span> 和 <span>隐私政策</span></p>
            </div>
            <div>
                <button class="btn-login" ref="btnLogin" @click="addLoginEvent">登录</button>
            </div>
        </div>
        <p class="tip" @click="toHome">暂不登录，随便看看</p>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
    name:"Pass",
    data(){
        return{
            userPhone:"",
            userVcode:"",
            vcode:"",
            isStart:false,
            times:60,
            settingTimes:60
        }
    },
    computed:{
        ...mapState(["user","userToken","fromPagePath","inpPhone","inpCode"]),
    },
    watch:{
        userPhone(newV){
            this.$store.state.inpPhone = newV;
        },
        userVcode(newV){
            this.$store.state.inpCode = newV;
        }
    },
    created(){
        this.userPhone = this.inpPhone;
        this.userVcode =this.inpCode;
    },
    methods:{
        ...mapMutations(["setUserToken"]),
        toHome(){
            this.$nextTick(()=>{
                if(!this.$refs.agree.checked){
                    alert("请阅读并同意服务条款和隐私政策！");
                    let timer = setInterval(()=>{
                        clearInterval(timer);
                        this.$refs.agree.checked=true;
                    },500)
                }else{
                    this.$router.push({path:this.fromPagePath})
                }
            })
        },
        // 设置发送验证可点击
        changeText(){
            if(this.userPhone.length>0){
                this.$nextTick(()=>{
                    this.$refs.senText.style["color"]="rgb(180,135,88)"
                    this.$refs.senText.style["pointerEvents"]="auto"
                })
            }else{
                this.$nextTick(()=>{
                    this.$refs.senText.style["color"]="rgb(208,208,208)"
                    this.$refs.senText.style["pointerEvents"]="none"
                })
            }
        },
        // 设置登录按钮可点击
        changeBtn(){
            if(this.userVcode.length>0){
                this.$nextTick(()=>{
                    this.$refs.btnLogin.style["backgroundColor"]="rgb(245,192,90)"
                    this.$refs.btnLogin.style["pointerEvents"]="auto"
                })
            }else{
                this.$nextTick(()=>{
                    this.$refs.btnLogin.style["backgroundColor"]="rgb(208,208,208)"
                    this.$refs.btnLogin.style["pointerEvents"]="none"
                })

            }
        },
        // 发送验证码
        getVcodee(){
            this.times=this.settingTimes
            this.isStart=true; //显示计时器数字
            // 设置不可点击状态
            this.$nextTick(()=>{
                this.$refs.senText.style["color"]="rgb(208,208,208)"
                this.$refs.senText.style["pointerEvents"]="none"
            })
            let timer = setInterval(()=>{
                this.times--;
                // 2秒之后发送验证码到控制台
                if(this.times == (this.settingTimes-2)){
                    this.vcode = Math.floor(Math.random()*1000000);
                    alert(this.vcode);
                    this.$store.state.code = this.vcode;
                }
                if(this.times <0){
                    clearInterval(timer);
                    this.isStart=false; //计时结束，隐藏计时器数字
                    // 设置可点击状态
                    this.$nextTick(()=>{
                        this.$refs.senText.style["color"]="rgb(180,135,88)"
                        this.$refs.senText.style["pointerEvents"]="auto"
                    })
                    // 重置计数器变量
                    this.times=this.settingTimes
                }
            },1000)
            
        },
        // 通过验证码登录
        addLoginEvent(){
             this.$nextTick(()=>{
                if(this.$refs.agree.checked){
                    if(this.userPhone == this.user.phone && this.userVcode == this.vcode){
                        localStorage.userToken = this.user.token;
                        this.setUserToken(this.user.token)
                        this.$router.push({path:"/home"})
                    }else{
                        alert("账号或密码错误！！！")
                    }
                }else{
                    alert("请阅读并同意服务条款和隐私政策！");
                }
            })
        }
    }
    
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.form{
    text-align: center;
    input[type="text"],input[type="password"]{
        width: 100%;
        height: 50px;
        background-color: rgb(244,244,244);
        border-radius: 10px;
        padding-left: 15px;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .vcodde{
        position: relative;
        .send{
            font-size: 14px;
            color: #999;
            position: absolute;
            top: 18px;
            right: 10px;
            pointer-events:none;
        }
    }
    .agree{
        input[type="checkbox"]{
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
        p{
            display: inline-block;
            font-size: 12px;
            vertical-align: middle;
            span{
                font-weight: bold;
                text-decoration: underline;
            }
        }
    }
    .btn-login{
        width: 70%;
        height: 50px;
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        background-color: rgb(208,208,208);
        margin-top: 20px;
        user-select: none;
        pointer-events:none;
    }
}
.tip{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: $moreCol;
}
</style>